<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人力资源审核管理</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .container {
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            height: 100vh;
        }
        
        .left-panel {
            width: 45%;
            background-color: white;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 750px;
            flex-shrink: 0;
        }
        
        .panel-divider {
            width: 6px;
            background-color: #e4e7ed;
            cursor: col-resize;
            position: relative;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .panel-divider:hover {
            background-color: #409eff;
        }
        
        .panel-divider.dragging {
            background-color: #409eff;
        }
        
        .panel-divider::after {
            content: '';
            width: 2px;
            height: 40px;
            background-color: #c0c4cc;
            border-radius: 1px;
        }
        
        .panel-divider:hover::after {
            background-color: white;
        }
        
        .panel-divider.dragging::after {
            background-color: white;
        }
        
        .right-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 300px;
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 300;
        }
        
        .header p {
            margin: 0;
            opacity: 0.9;
            font-size: 16px;
        }
        

        
        .table-section {
            padding: 10px;
        }
        
        .table-section h2 {
            color: #2c3e50;
            margin: 0 0 20px 0;
            font-size: 20px;
            font-weight: 500;
        }
        

        

        
        .summary-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            flex: 1;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        
        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            opacity: 0.9;
        }
        
        .stat-card .number {
            font-size: 24px;
            font-weight: bold;
        }
        
        .division-header {
            background-color: #e6f7ff !important;
            font-weight: 600;
            color: #1890ff;
        }
        
        .bu-header {
            background-color: #f6ffed !important;
            font-weight: 500;
            color: #52c41a;
        }
        
        .function-header {
            background-color: #fff7e6 !important;
            font-weight: 500;
            color: #fa8c16;
        }
        
        .month-header {
            background-color: #f0f9ff !important;
            font-weight: 500;
            color: #409eff;
            text-align: center;
        }
        
        .user-header {
            background-color: #f8f9fa !important;
            font-weight: 500;
            color: #6c757d;
        }
        
        .readonly-cell {
            padding: 4px;
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #606266;
        }
        
        .tab-content {
            padding: 10px 0;
        }
        
        .tab-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .tab-count {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }
        
        .audit-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
            white-space: nowrap;
        }
        
        .audit-actions .el-button {
            margin: 0;
            flex-shrink: 0;
        }
        
        .status-tag {
            text-align: center;
        }
        
        .month-header {
            background-color: #f0f9ff !important;
            font-weight: 500;
            color: #409eff;
        }
        
        .details-dialog {
            height: 92vh !important;
            display: flex;
            flex-direction: column;
        }
        
        .details-dialog .el-dialog__body {
            height: calc(92vh - 120px);
            overflow-y: auto;
            padding: 20px;
            flex: 1;
            min-height: 0;
        }
        
        .details-dialog .el-dialog__header {
            padding: 20px 20px 10px 20px;
            border-bottom: 1px solid #ebeef5;
            flex-shrink: 0;
        }
        
        .details-dialog .el-dialog__footer {
            padding: 10px 20px 20px 20px;
            border-top: 1px solid #ebeef5;
            flex-shrink: 0;
        }
        
        .results-dialog .el-dialog__body {
            padding: 0;
            height: 85vh;
        }
        
        .results-dialog .el-dialog__header {
            padding: 15px 20px;
            border-bottom: 1px solid #e4e7ed;
        }
        
        .results-dialog .el-dialog__footer {
            padding: 10px 20px;
            border-top: 1px solid #e4e7ed;
        }
        
        .results-content {
            height: 100%;
            overflow: hidden;
        }
        
        .details-content {
            text-align: left;
            max-width: 100%;
            overflow-x: auto;
        }
        
        /* 详情对话框表格样式 */
        .category-header {
            background-color: #e6f7ff !important;
            font-weight: 600 !important;
            color: #1890ff !important;
        }
        
        .subcategory-header {
            background-color: #f0f9ff !important;
            font-weight: 500 !important;
            color: #409eff !important;
        }
        
        .data-cell-positive {
            background-color: #f0f9ff !important;
        }
        
        .data-cell-zero {
            background-color: #f8f9fa !important;
        }
        
        /* 左侧任务列表样式 */
        .task-list-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .task-list-header {
            padding: 10px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
        }
        
        .task-list-header h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 16px;
            font-weight: 600;
        }
        
        .search-filter-section {
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        
        .search-filter-section .el-form-item {
            margin-bottom: 0;
            margin-right: 16px;
        }
        
        .search-filter-section .el-form-item__label {
            color: #606266;
            font-weight: 500;
        }
        
        .task-detail-header {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
        }
        
        .task-detail-header h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 16px;
            font-weight: 600;
        }
        
        .task-list {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        

        
        .task-name {
            font-weight: 500;
        }
        
        .selected-task {
            color: #409eff;
            font-weight: 600;
        }
        
        /* 选中行的样式 */
        .el-table .selected-row {
            background-color: #f0f9ff !important;
        }
        
        .el-table .selected-row:hover > td {
            background-color: #e6f7ff !important;
        }
        
        .el-table .selected-row td {
            background-color: #f0f9ff !important;
        }
        
        /* 表格行高样式 */
        .el-table .el-table__body td {
            padding: 4px 0;
        }
        
        .el-table .el-table__header th {
            padding: 8px 0;
        }
        
        .empty-task-list {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        /* 右侧任务详情样式 */
        .task-detail-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .task-detail-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
        }
        
        .task-detail-header h2 {
            margin: 0 0 10px 0;
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }
        
        .task-info {
            display: flex;
            gap: 20px;
            font-size: 14px;
            color: #606266;
        }
        
        .task-info span {
            background-color: white;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #e4e7ed;
        }
        
        .no-task-selected {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }
        
        /* 调整表格区域样式 */
        .table-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0;
        }
        

        

        

    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 左侧面板：已发布的填报任务 -->
            <div class="left-panel" ref="leftPanel">
                
                <div class="task-list-section">
                    <div class="task-list-header">
                        <h3>任务管理</h3>
                        <el-button type="primary" size="small" icon="el-icon-plus" @click="createNewTask">
                            发布任务
                        </el-button>
                    </div>
                    
                    <!-- 搜索过滤区域 -->
                    <div class="search-filter-section">
                        <el-form :inline="true" size="small">
                            <el-form-item label="时间段">
                                <el-date-picker
                                    v-model="dateRange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="filterTasks"
                                    style="width: 240px;">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select 
                                    v-model="statusFilter" 
                                    placeholder="选择状态" 
                                    @change="filterTasks"
                                    style="width: 120px;">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="进行中" value="active"></el-option>
                                    <el-option label="草稿" value="draft"></el-option>
                                    <el-option label="已关闭" value="closed"></el-option>
                                    <el-option label="已归档" value="archived"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="filterTasks" icon="el-icon-search">搜索</el-button>
                                <el-button @click="resetFilter" icon="el-icon-refresh">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    
                    <div class="task-list" v-if="filteredTaskList.length > 0">
                        <el-table 
                            :data="filteredTaskList" 
                            style="width: 100%" 
                            @row-click="selectTask"
                            :row-class-name="getRowClassName"
                        >
                            <el-table-column prop="taskName" label="任务名称" min-width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="task-name">
                                        <span :class="{ 'selected-task': selectedTask && selectedTask.id === scope.row.id }">
                                            {{ scope.row.taskName }}
                                        </span>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="monthRange" label="预测月份" min-width="120" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.monthRange || scope.row.month || '未设置' }}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="publisher" label="发布人" min-width="80" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.publisher }}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="publishTime" label="发布时间" min-width="120" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.publishTime) }}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="status" label="任务状态" min-width="80" align="center">
                                <template slot-scope="scope">
                                    <el-tag 
                                        :type="getTaskStatusType(scope.row.status)"
                                        size="small"
                                    >
                                        {{ getTaskStatusText(scope.row.status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            
                            <el-table-column label="操作" min-width="150" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click.stop="editTask(scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        style="color: #f56c6c;"
                                        @click.stop="deleteTask(scope.row)">
                                        删除
                                    </el-button>
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click.stop="viewResults(scope.row)">
                                        查看结果
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    
                    <div v-else class="empty-task-list">
                        <el-empty :description="taskList.length > 0 ? '暂无符合条件的任务' : '暂无已发布任务'">
                        </el-empty>
                    </div>
                </div>
            </div>
            
            <!-- 分隔线 -->
            <div class="panel-divider" ref="divider" @mousedown="startResize"></div>
            
            <!-- 右侧面板：任务详情 -->
            <div class="right-panel" ref="rightPanel">
                
                <!-- 任务详情区域 -->
                <div class="task-detail-section" v-if="selectedTask">
                    <!-- 右侧header -->
                    <div class="task-detail-header">
                        <h3>任务详情</h3>
                    </div>
                    
                    <!-- 标签页 -->
                    <div style="padding: 0 20px; margin-top: 10px;">
                        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                            <el-tab-pane :label="`待审核 (${pendingReviewCount})`" name="pending">
                            </el-tab-pane>
                            <el-tab-pane :label="`已通过 (${approvedCount})`" name="approved">
                            </el-tab-pane>
                            <el-tab-pane :label="`待提交 (${pendingSubmissionCount})`" name="unsubmitted">
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    
                    <div style="flex: 1; display: flex; flex-direction: column;">
                        <!-- 待审核标签页的简化表格 -->
                        <el-table v-if="activeTab === 'pending' && currentTableData.length > 0" :data="currentTableData" border style="width: 100%" :max-height="tableMaxHeight">
                            <el-table-column prop="month" label="所属月份" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="month-header">{{ getMonthRange(scope.row) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="division" label="Division" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="division-header">{{ scope.row.division }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="bu" label="BU" min-width="100" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="bu-header">{{ scope.row.bu }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="userName" label="责任人" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ scope.row.userName }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="submitTime" label="提交时间" min-width="160" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.submitTime) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="status" label="审核状态" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="status-tag">
                                        <el-tag 
                                            :type="getStatusType(scope.row.status)"
                                            size="small"
                                        >
                                            {{ getStatusText(scope.row.status) }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="auditActions" label="操作" min-width="200" align="center" fixed="right" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click="approveRecord(scope.row)"
                                    >
                                        通过
                                    </el-button>
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click="rejectRecord(scope.row)"
                                    >
                                        退回
                                    </el-button>
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click="viewDetails(scope.row)"
                                    >
                                        查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <!-- 已通过标签页的简化表格 -->
                        <el-table v-else-if="activeTab === 'approved' && currentTableData.length > 0" :data="currentTableData" border style="width: 100%" :max-height="tableMaxHeight">
                            <el-table-column prop="month" label="所属月份" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="month-header">{{ getMonthRange(scope.row) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="division" label="Division" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="division-header">{{ scope.row.division }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="bu" label="BU" min-width="100" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="bu-header">{{ scope.row.bu }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="userName" label="责任人" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ scope.row.userName }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="submitTime" label="提交时间" min-width="160" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.submitTime) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="status" label="审核状态" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="status-tag">
                                        <el-tag 
                                            :type="getStatusType(scope.row.status)"
                                            size="small"
                                        >
                                            {{ getStatusText(scope.row.status) }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="auditActions" label="操作" min-width="200" align="center" fixed="right" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click="viewDetails(scope.row)"
                                    >
                                        查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <!-- 待提交标签页的简化表格 -->
                        <el-table v-else-if="activeTab === 'unsubmitted' && currentTableData.length > 0" :data="currentTableData" border style="width: 100%" :max-height="tableMaxHeight">
                            <el-table-column prop="month" label="所属月份" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="month-header">{{ getMonthRange(scope.row) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="division" label="Division" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="division-header">{{ scope.row.division }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="bu" label="BU" min-width="100" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="bu-header">{{ scope.row.bu }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="userName" label="责任人" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ scope.row.userName }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="submitTime" label="提交时间" min-width="160" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.submitTime) }}</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="status" label="审核状态" min-width="120" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="status-tag">
                                        <el-tag 
                                            :type="getStatusType(scope.row.status)"
                                            size="small"
                                        >
                                            {{ getStatusText(scope.row.status) }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="auditActions" label="操作" min-width="200" align="center" fixed="right" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button 
                                        type="text" 
                                        size="small" 
                                        @click="viewDetails(scope.row)"
                                    >
                                        查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <!-- 无数据时的空状态 -->
                        <div v-else-if="currentTableData.length === 0" style="text-align: center; padding: 40px;">
                            <el-empty :description="`暂无${getTabDescription(activeTab)}数据`">
                            </el-empty>
                        </div>
                        

                    </div>
                </div>
                
                <!-- 无任务选择提示 -->
                <div class="no-task-selected" v-else>
                    <el-empty description="请选择左侧的填报任务查看详情">
                    </el-empty>
                </div>
            </div>
        </div>
        
        <!-- 详情对话框 -->
        <el-dialog 
            title="详细信息" 
            :visible.sync="detailsDialogVisible" 
            width="90%" 
            :before-close="handleDetailsClose"
            custom-class="details-dialog"
            :close-on-click-modal="false"
            top="1vh"
        >
            <div v-if="selectedDetailRow" class="details-content">
                <h4 style="margin-bottom: 20px; color: #2c3e50;">详细信息 - {{ selectedDetailRow.userName }}</h4>
                
                <!-- 基本信息 -->
                <div style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 4px;">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                        <div><strong>Division:</strong> {{ selectedDetailRow.division }}</div>
                        <div><strong>BU:</strong> {{ selectedDetailRow.bu }}</div>
                        <div><strong>Function:</strong> {{ selectedDetailRow.function }}</div>
                        <div><strong>Category:</strong> {{ selectedDetailRow.category }}</div>
                        <div><strong>责任人:</strong> {{ selectedDetailRow.userName }}</div>
                        <div><strong>提交时间:</strong> {{ formatDate(selectedDetailRow.submitTime) }}</div>
                        <div><strong>审核状态:</strong> 
                            <span :style="{ color: getStatusColor(selectedDetailRow.status), fontWeight: 'bold' }">
                                {{ getStatusText(selectedDetailRow.status) }}
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- 人力资源需求表格 -->
                <h5 style="margin-bottom: 15px; color: #2c3e50;">人力资源需求表格</h5>
                <el-table 
                    :data="detailTableData" 
                    border 
                    style="width: 100%; font-size: 14px;"
                    :max-height="400"
                >
                    <el-table-column prop="bu" label="BU" width="100" align="center" :show-overflow-tooltip="true" fixed="left">
                        <template slot-scope="scope">
                            <span :class="{ 'category-header': scope.row.isCategory }">
                                {{ scope.row.bu }}
                            </span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="category" label="Function" width="120" align="center" :show-overflow-tooltip="true" fixed="left">
                        <template slot-scope="scope">
                            <span :class="{ 'category-header': scope.row.isCategory }">
                                {{ scope.row.category }}
                            </span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="subcategory" label="Category" width="150" align="center" :show-overflow-tooltip="true" fixed="left">
                        <template slot-scope="scope">
                            <span :class="{ 'subcategory-header': scope.row.isCategory }">
                                {{ scope.row.subcategory }}
                            </span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column 
                        v-for="month in months" 
                        :key="month" 
                        :prop="month" 
                        :label="month" 
                        width="80" 
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span :class="getDetailCellClass(scope.row, month)">
                                {{ scope.row[month] || 0 }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailsDialogVisible = false">关闭</el-button>
                <el-button 
                    type="warning" 
                    @click="rejectRecordFromDialog"
                    v-if="selectedDetailRow && selectedDetailRow.status === 'pending'"
                >
                    退回
                </el-button>
                <el-button 
                    type="primary" 
                    @click="approveRecordFromDialog"
                    v-if="selectedDetailRow && selectedDetailRow.status === 'pending'"
                >
                    通过
                </el-button>
            </div>
        </el-dialog>
        
        <!-- 查看结果对话框 -->
        <el-dialog 
            title="Forecast数据查看" 
            :visible.sync="resultsDialogVisible" 
            width="98%" 
            :before-close="handleResultsClose"
            custom-class="results-dialog"
            :close-on-click-modal="false"
            top="1vh"
        >
            <div class="results-content">
                <iframe 
                    src="data-import-forecast.html" 
                    style="width: 100%; height: 100%; border: none;"
                    frameborder="0"
                ></iframe>
            </div>
            
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="resultsDialogVisible = false">关闭</el-button>
            </div> -->
        </el-dialog>
        
        <!-- 创建任务对话框 -->
        <el-dialog 
            title="创建新任务" 
            :visible.sync="createTaskDialogVisible" 
            width="500px"
            :close-on-click-modal="false"
        >
            <el-form :model="newTaskForm" label-width="120px">
                <el-form-item label="任务名称" required>
                    <el-input 
                        v-model="newTaskForm.taskName" 
                        placeholder="请选择月份范围后自动生成"
                        style="width: 100%;"
                        readonly
                    ></el-input>
                </el-form-item>
                
                <el-form-item label="预测月份范围" required>
                    <el-date-picker
                        v-model="newTaskForm.monthRange"
                        type="monthrange"
                        range-separator="至"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        style="width: 100%;"
                        @change="generateTaskName"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="createTaskDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitCreateTask">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    allTableData: [],
                    allUsersData: {},
                    activeTab: 'pending',
                    // 任务管理相关数据
                    taskList: [],
                    selectedTask: null,
                    // 过滤相关数据
                    dateRange: [],
                    statusFilter: '',
                    filteredTaskList: [],
                    isResizing: false,
                    startX: 0,
                    startLeftWidth: 0,
                    // 详情对话框相关数据
                    detailsDialogVisible: false,
                    selectedDetailRow: null,
                    detailTableData: [],
                    // 查看结果对话框相关数据
                    resultsDialogVisible: false,
                    // 窗口大小变化触发器
                    resizeTrigger: 0,
                    // 创建任务对话框相关数据
                    createTaskDialogVisible: false,
                    newTaskForm: {
                        taskName: '',
                        monthRange: []
                    }
                }
            },

            computed: {
                pendingReviewData() {
                    return this.allTableData.filter(row => row.status === 'pending');
                },
                
                approvedData() {
                    return this.allTableData.filter(row => row.status === 'approved');
                },
                
                unsubmittedData() {
                    return this.allTableData.filter(row => !row.submitTime);
                },
                
                currentTableData() {
                    switch (this.activeTab) {
                        case 'pending':
                            return this.pendingReviewData;
                        case 'approved':
                            return this.approvedData;
                        case 'unsubmitted':
                            return this.unsubmittedData;
                        default:
                            return this.pendingReviewData;
                    }
                },
                
                pendingReviewCount() {
                    return this.pendingReviewData.length;
                },
                
                approvedCount() {
                    return this.approvedData.length;
                },
                
                pendingSubmissionCount() {
                    return this.unsubmittedData.length;
                },
                
                totalRecordsCount() {
                    return this.allTableData.length;
                },
                
                tableMaxHeight() {
                    // 计算表格最大高度：视窗高度 - 头部 - 标签页 - 其他元素
                    const headerHeight = 60; // 头部高度
                    const tabHeight = 50; // 标签页高度
                    const otherElementsHeight = 15; // 其他元素高度（减少15px）
                    const height = window.innerHeight - headerHeight - tabHeight - otherElementsHeight;
                    // 使用resizeTrigger确保computed属性能够响应窗口大小变化
                    this.resizeTrigger; // 依赖resizeTrigger
                    return Math.max(height, 200); // 确保最小高度
                }
                

            },

            mounted() {
                this.loadTaskList();
                this.loadAllUsersData();
                this.generateTableData();
                // 监听窗口大小变化，重新计算表格高度
                window.addEventListener('resize', this.handleWindowResize);
            },
            
            beforeDestroy() {
                window.removeEventListener('resize', this.handleWindowResize);
            },
            
            methods: {
                loadAllUsersData() {
                    // 从localStorage加载所有用户数据
                    const allData = localStorage.getItem('allUsersData');
                    if (allData) {
                        try {
                            this.allUsersData = JSON.parse(allData);
                        } catch (error) {
                            console.error('加载用户数据失败:', error);
                            this.allUsersData = {};
                        }
                    }
                    
                    // 如果没有汇总数据，尝试从单个用户数据加载
                    if (Object.keys(this.allUsersData).length === 0) {
                        this.loadFromIndividualData();
                    }
                },
                
                loadFromIndividualData() {
                    // 尝试从index页面的数据格式加载
                    const hrTableData = localStorage.getItem('hrTableData');
                    if (hrTableData) {
                        try {
                            const data = JSON.parse(hrTableData);
                            const userId = 'default_user';
                            this.allUsersData[userId] = {
                                userId: userId,
                                userName: '默认用户',
                                lastUpdate: data.timestamp || new Date().toISOString(),
                                tableData: data.tableData || []
                            };
                        } catch (error) {
                            console.error('加载单个用户数据失败:', error);
                        }
                    }
                },
                
                generateTableData() {
                    this.allTableData = [];
                    
                    Object.values(this.allUsersData).forEach(userData => {
                        if (userData.tableData && userData.tableData.length > 0) {
                            userData.tableData.forEach(row => {
                                // 只处理数据行，跳过分类标题行和总计行
                                if (!row.isCategory && !row.isTotal) {
                                    const tableRow = {
                                        division: this.getDivisionFromBU(row.bu),
                                        bu: this.getBUName(row.bu),
                                        function: row.function,
                                        category: row.category,
                                        userName: userData.userName,
                                        submitTime: userData.lastUpdate,
                                        status: row.status || 'pending'
                                    };
                                    
                                    // 添加月份数据
                                    this.months.forEach(month => {
                                        tableRow[month] = row[month] || 0;
                                    });
                                    
                                    this.allTableData.push(tableRow);
                                }
                            });
                        }
                    });
                },
                
                getBUName(bu) {
                    // 如果bu是对象，返回name字段；如果是字符串，直接返回
                    if (typeof bu === 'object' && bu !== null) {
                        return bu.name || bu.id || '未知BU';
                    }
                    return bu || '未知BU';
                },
                
                getDivisionFromBU(bu) {
                    // 如果bu是对象，从division字段获取；否则使用默认逻辑
                    if (typeof bu === 'object' && bu !== null && bu.division) {
                        return bu.division.name || bu.division.id || '未知Division';
                    }
                    
                    // 根据BU确定Division，这里可以根据实际需求调整
                    if (bu === 'BU1') {
                        return 'Division1';
                    } else if (bu === 'BU2') {
                        return 'Division2';
                    } else {
                        return 'Division1'; // 默认值
                    }
                },
                
                refreshData() {
                    this.loadAllUsersData();
                    this.generateTableData();
                    this.$message.success('数据已刷新');
                },
                
                exportData() {
                    if (this.allTableData.length === 0) {
                        this.$message.warning('没有可导出的数据');
                        return;
                    }
                    
                    // 创建CSV格式的数据
                    let csvContent = "Division,BU,Function,Category," + this.months.join(',') + ",填报人,填报时间,状态\n";
                    
                    this.allTableData.forEach(row => {
                        const rowData = [
                            row.division,
                            row.bu,
                            row.function,
                            row.category,
                            ...this.months.map(month => row[month] || 0),
                            row.userName,
                            this.formatDate(row.submitTime),
                            this.getStatusText(row.status)
                        ];
                        csvContent += rowData.join(',') + '\n';
                    });
                    
                    // 创建下载链接
                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement('a');
                    const url = URL.createObjectURL(blob);
                    link.setAttribute('href', url);
                    link.setAttribute('download', `人力资源审核表_${new Date().toISOString().split('T')[0]}.csv`);
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    this.$message.success('数据已导出为CSV文件');
                },
                
                formatDate(dateString) {
                    if (!dateString) return '未知';
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hours}:${minutes}`;
                },
                
                getStatusType(status) {
                    if (status === 'approved') {
                        return 'success';
                    } else if (status === 'rejected') {
                        return 'warning';
                    }
                    return 'info'; // 默认状态
                },

                getStatusText(status) {
                    if (status === 'approved') {
                        return '已通过';
                    } else if (status === 'rejected') {
                        return '已退回';
                    }
                    return '待审核'; // 默认状态
                },
                
                getStatusColor(status) {
                    if (status === 'approved') {
                        return '#67c23a';
                    } else if (status === 'rejected') {
                        return '#e6a23c';
                    }
                    return '#409eff'; // 默认状态
                },
                
                getMonthRange(row) {
                    // 获取有数据的月份范围
                    const monthsWithData = this.months.filter(month => row[month] && row[month] > 0);
                    if (monthsWithData.length === 0) {
                        return '无数据';
                    }
                    
                    // 获取年份，如果没有年份信息则使用当前年份
                    const year = row.year || new Date().getFullYear();
                    
                    // 只显示第一个有数据的月份
                    const firstMonth = Math.min(...monthsWithData.map(m => parseInt(m)));
                    return `${year}-${String(firstMonth).padStart(2, '0')}`;
                },
                
                viewDetails(row) {
                    // 使用模板方式显示详情对话框
                    this.showDetailsDialog(row);
                },
                
                generateTableDataForDetails(row) {
                    // 生成与index页面相同的表格数据结构
                    const tableData = [];
                    const categories = ['维修', '质量', '生产'];
                    const bus = ['BU1', 'BU1', 'BU2'];
                    const subcategories = ['Permanent', 'Overtime/FTE', 'Temporary'];
                    
                    categories.forEach((category, index) => {
                        // 添加分类标题行
                        tableData.push({
                            bu: bus[index],
                            category: category,
                            isCategory: true,
                            subcategory: 'Total',
                        });
                        
                        // 添加子分类行
                        subcategories.forEach(subcategory => {
                            const tableRow = {
                                bu: bus[index],
                                category: category,
                                subcategory: subcategory,
                                isCategory: false,
                                isTotal: true
                            };
                            
                            // 如果是当前记录对应的行，使用实际数据
                            if (category === row.function && subcategory === row.category) {
                                this.months.forEach(month => {
                                    tableRow[month] = row[month] || 0;
                                });
                            } else {
                                // 其他行使用0
                                this.months.forEach(month => {
                                    tableRow[month] = 0;
                                });
                            }
                            
                            tableData.push(tableRow);
                        });
                    });
                    
                    return tableData;
                },
                
                handleTabClick(tab) {
                    // 标签页切换时的处理逻辑
                    console.log('切换到标签页:', tab.name);
                },
                
                approveRecord(row) {
                    this.$confirm(`确定要审核通过此记录吗？`, '审核通过', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        row.status = 'approved';
                        this.$message.success('记录已审核通过');
                        this.saveAuditResult(row);
                    }).catch(() => {
                        this.$message.info('已取消审核通过');
                    });
                },

                rejectRecord(row) {
                    this.$prompt('请输入退回原因', '退回更改', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '请输入退回原因',
                        inputValidator: (value) => {
                            if (!value) {
                                return '退回原因不能为空';
                            }
                            return true;
                        }
                    }).then(({ value }) => {
                        row.status = 'rejected';
                        row.rejectReason = value;
                        this.$message.success('记录已退回更改');
                        this.saveAuditResult(row);
                    }).catch(() => {
                        this.$message.info('已取消退回更改');
                    });
                },
                
                saveAuditResult(row) {
                    // 保存审核结果到原始数据
                    Object.values(this.allUsersData).forEach(userData => {
                        if (userData.tableData && userData.tableData.length > 0) {
                            userData.tableData.forEach(dataRow => {
                                if (!dataRow.isCategory && !dataRow.isTotal) {
                                    if (this.getBUName(dataRow.bu) === row.bu && 
                                        dataRow.function === row.function && 
                                        dataRow.category === row.category) {
                                        dataRow.status = row.status;
                                        if (row.rejectReason) {
                                            dataRow.rejectReason = row.rejectReason;
                                        }
                                    }
                                }
                            });
                        }
                    });
                    
                    // 保存到localStorage
                    localStorage.setItem('allUsersData', JSON.stringify(this.allUsersData));
                },
                
                goToSummary() {
                    window.open('summary.html', '_blank');
                },
                
                goToIndex() {
                    window.open('index.html', '_blank');
                },
                
                // 任务管理相关方法
                loadTaskList() {
                    // 从localStorage加载任务列表
                    const savedTaskList = localStorage.getItem('taskList');
                    if (savedTaskList) {
                        this.taskList = JSON.parse(savedTaskList);
                    } else {
                        // 初始化示例任务数据
                        this.taskList = [
                            {
                                id: '1',
                                taskName: '2025年4-6月预测填报',
                                month: '2025-04至2025-06',
                                publisher: 'HR',
                                publishTime: '2024-02-15T10:00:00',
                                status: 'active'
                            },
                            {
                                id: '2',
                                taskName: '2025年5-7月预测填报',
                                month: '2025-05至2025-07',
                                publisher: 'HR',
                                publishTime: '2024-04-01T14:30:00',
                                status: 'active'
                            },
                            {
                                id: '3',
                                taskName: '2025年6-8月预测填报',
                                month: '2025-06至2025-08',
                                publisher: 'HR',
                                publishTime: '2024-05-01T09:15:00',
                                status: 'draft'
                            }
                        ];
                        this.saveTaskList();
                    }
                    // 初始化过滤后的列表
                    this.filteredTaskList = [...this.taskList];
                },
                
                saveTaskList() {
                    localStorage.setItem('taskList', JSON.stringify(this.taskList));
                },
                
                selectTask(task) {
                    this.selectedTask = task;
                    // 根据选中的任务加载相应的数据
                    this.loadTaskData(task);
                },
                
                loadTaskData(task) {
                    // 这里可以根据任务ID加载相应的填报数据
                    // 暂时使用现有的数据加载逻辑
                    this.loadAllUsersData();
                    this.generateTableData();
                },
                
                createNewTask() {
                    // 显示任务创建对话框
                    this.createTaskDialogVisible = true;
                    this.newTaskForm = {
                        taskName: '',
                        monthRange: []
                    };
                },
                
                editTask(task) {
                    this.$prompt('请输入新的任务名称', '编辑任务', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue: task.taskName,
                        inputPlaceholder: '请输入任务名称',
                        inputValidator: (value) => {
                            if (!value) {
                                return '任务名称不能为空';
                            }
                            return true;
                        }
                    }).then(({ value }) => {
                        task.taskName = value;
                        this.saveTaskList();
                        this.$message.success('任务更新成功');
                    }).catch(() => {
                        this.$message.info('已取消编辑任务');
                    });
                },
                
                deleteTask(task) {
                    this.$confirm(`确定要删除任务"${task.taskName}"吗？`, '确认删除', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const index = this.taskList.findIndex(t => t.id === task.id);
                        if (index > -1) {
                            this.taskList.splice(index, 1);
                            this.saveTaskList();
                            
                            // 如果删除的是当前选中的任务，清空选择
                            if (this.selectedTask && this.selectedTask.id === task.id) {
                                this.selectedTask = null;
                            }
                            
                            this.$message.success('任务删除成功');
                        }
                    }).catch(() => {
                        this.$message.info('已取消删除任务');
                    });
                },
                
                getTaskStatusType(status) {
                    const statusMap = {
                        'active': 'success',
                        'draft': 'info',
                        'closed': 'warning',
                        'archived': ''
                    };
                    return statusMap[status] || 'info';
                },
                
                getTaskStatusText(status) {
                    const statusMap = {
                        'active': '进行中',
                        'draft': '草稿',
                        'closed': '已关闭',
                        'archived': '已归档'
                    };
                    return statusMap[status] || '未知';
                },
                
                getTabDescription(tab) {
                    const tabMap = {
                        'pending': '待审核',
                        'approved': '已通过',
                        'unsubmitted': '待提交'
                    };
                    return tabMap[tab] || '未知';
                },
                
                filterTasks() {
                    let filtered = [...this.taskList];
                    
                    // 按状态过滤
                    if (this.statusFilter) {
                        filtered = filtered.filter(task => task.status === this.statusFilter);
                    }
                    
                    // 按时间段过滤
                    if (this.dateRange && this.dateRange.length === 2) {
                        const startDate = new Date(this.dateRange[0]);
                        const endDate = new Date(this.dateRange[1]);
                        
                        filtered = filtered.filter(task => {
                            const taskDate = new Date(task.publishTime);
                            return taskDate >= startDate && taskDate <= endDate;
                        });
                    }
                    
                    this.filteredTaskList = filtered;
                },
                
                resetFilter() {
                    this.dateRange = [];
                    this.statusFilter = '';
                    this.filteredTaskList = [...this.taskList];
                },
                
                // 面板拖拽调整大小相关方法
                startResize(event) {
                    this.isResizing = true;
                    this.startX = event.clientX;
                    this.startLeftWidth = this.$refs.leftPanel.offsetWidth;
                    
                    // 添加拖拽样式
                    this.$refs.divider.classList.add('dragging');
                    
                    // 添加全局事件监听
                    document.addEventListener('mousemove', this.handleResize);
                    document.addEventListener('mouseup', this.stopResize);
                    
                    // 防止文本选择
                    event.preventDefault();
                },
                
                handleResize(event) {
                    if (!this.isResizing) return;
                    
                    const deltaX = event.clientX - this.startX;
                    const containerWidth = this.$refs.leftPanel.parentElement.offsetWidth;
                    const dividerWidth = this.$refs.divider.offsetWidth;
                    
                    // 计算新的左侧面板宽度
                    let newLeftWidth = this.startLeftWidth + deltaX;
                    
                    // 限制最小和最大宽度
                    const minWidth = 300;
                    const maxWidth = containerWidth - dividerWidth - minWidth;
                    
                    newLeftWidth = Math.max(minWidth, Math.min(newLeftWidth, maxWidth));
                    
                    // 设置左侧面板宽度
                    this.$refs.leftPanel.style.width = newLeftWidth + 'px';
                    
                    // 右侧面板会自动调整（因为使用了flex布局）
                },
                
                stopResize() {
                    this.isResizing = false;
                    
                    // 移除拖拽样式
                    if (this.$refs.divider) {
                        this.$refs.divider.classList.remove('dragging');
                    }
                    
                    // 移除全局事件监听
                    document.removeEventListener('mousemove', this.handleResize);
                    document.removeEventListener('mouseup', this.stopResize);
                },
                
                // 获取行的CSS类名，用于选中效果
                getRowClassName({ row, rowIndex }) {
                    if (this.selectedTask && this.selectedTask.id === row.id) {
                        return 'selected-row';
                    }
                    return '';
                },
                
                // 详情对话框相关方法
                showDetailsDialog(row) {
                    this.selectedDetailRow = row;
                    this.detailTableData = this.generateTableDataForDetails(row);
                    this.detailsDialogVisible = true;
                },
                
                handleDetailsClose() {
                    this.detailsDialogVisible = false;
                    this.selectedDetailRow = null;
                    this.detailTableData = [];
                },
                
                approveRecordFromDialog() {
                    this.$confirm(`确定要审核通过此记录吗？`, '审核通过', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        this.selectedDetailRow.status = 'approved';
                        this.$message.success('记录已审核通过');
                        this.saveAuditResult(this.selectedDetailRow);
                        this.handleDetailsClose();
                    }).catch(() => {
                        this.$message.info('已取消审核通过');
                    });
                },
                
                rejectRecordFromDialog() {
                    this.$prompt('请输入退回原因', '退回更改', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '请输入退回原因',
                        inputValidator: (value) => {
                            if (!value) {
                                return '退回原因不能为空';
                            }
                            return true;
                        }
                    }).then(({ value }) => {
                        this.selectedDetailRow.status = 'rejected';
                        this.selectedDetailRow.rejectReason = value;
                        this.$message.success('记录已退回更改');
                        this.saveAuditResult(this.selectedDetailRow);
                        this.handleDetailsClose();
                    }).catch(() => {
                        this.$message.info('已取消退回更改');
                    });
                },
                
                getDetailCellClass(row, month) {
                    const value = row[month] || 0;
                    
                    if (row.isCategory) {
                        return 'subcategory-header';
                    } else if (value > 0) {
                        return 'data-cell-positive';
                    } else {
                        return 'data-cell-zero';
                    }
                },
                
                handleWindowResize() {
                    // 窗口大小变化时触发重新计算
                    this.resizeTrigger++;
                    
                    // 延迟执行以确保DOM更新完成
                    this.$nextTick(() => {
                        this.$forceUpdate();
                        // 触发表格重新渲染
                        if (this.$refs.rightPanel) {
                            const rightPanel = this.$refs.rightPanel;
                            // 临时改变高度以触发布局重新计算
                            rightPanel.style.height = 'auto';
                            this.$nextTick(() => {
                                rightPanel.style.height = '';
                                // 再次强制更新以确保表格高度正确
                                this.$forceUpdate();
                            });
                        }
                    });
                },
                
                // 查看结果对话框相关方法
                viewResults(row) {
                    this.resultsDialogVisible = true;
                },
                
                handleResultsClose() {
                    this.resultsDialogVisible = false;
                },
                
                submitCreateTask() {
                    if (!this.newTaskForm.taskName.trim()) {
                        this.$message.error('请选择预测月份范围');
                        return;
                    }
                    
                    if (!this.newTaskForm.monthRange || this.newTaskForm.monthRange.length !== 2) {
                        this.$message.error('请选择预测月份范围');
                        return;
                    }
                    
                    const [startMonth, endMonth] = this.newTaskForm.monthRange;
                    const monthRangeText = `${startMonth} 至 ${endMonth}`;
                    
                    const newTask = {
                        id: Date.now().toString(),
                        taskName: this.newTaskForm.taskName.trim(),
                        monthRange: monthRangeText,
                        publisher: 'HR',
                        publishTime: new Date().toISOString(),
                        status: 'draft'
                    };
                    
                    this.taskList.unshift(newTask);
                    this.saveTaskList();
                    this.selectTask(newTask);
                    this.createTaskDialogVisible = false;
                    this.$message.success('任务创建成功');
                },
                
                // 根据月份范围自动生成任务名称
                generateTaskName() {
                    if (this.newTaskForm.monthRange && this.newTaskForm.monthRange.length === 2) {
                        const [startMonth, endMonth] = this.newTaskForm.monthRange;
                        const startYear = startMonth.split('-')[0];
                        const startMonthNum = startMonth.split('-')[1];
                        const endMonthNum = endMonth.split('-')[1];
                        
                        // 如果开始和结束月份相同，只显示一个月份
                        if (startMonth === endMonth) {
                            this.newTaskForm.taskName = `${startYear}年${startMonthNum}月预测填报`;
                        } else {
                            this.newTaskForm.taskName = `${startYear}年${startMonthNum}-${endMonthNum}月预测填报`;
                        }
                    } else {
                        this.newTaskForm.taskName = '';
                    }
                }
            }
        });
    </script>
</body>
</html> 